<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS 按钮集合</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<nav class="bg-white shadow-lg">
    <div class="max-w-6xl mx-auto px-4">
        <div class="flex justify-between">
            <!-- 左侧logo/品牌 -->
            <div class="flex space-x-4">
                <div>
                    <a href="#" class="flex items-center py-5 px-2 text-gray-700 hover:text-gray-900">
                        <svg class="h-6 w-6 mr-1 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                        </svg>
                        <span class="font-bold">品牌名称</span>
                    </a>
                </div>
            </div>

            <!-- 主要导航链接 -->
            <div class="hidden md:flex items-center space-x-1">
                <a href="#" class="py-5 px-3 text-gray-700 hover:text-gray-900">首页</a>
                <a href="#" class="py-5 px-3 text-gray-700 hover:text-gray-900">产品</a>
                <a href="#" class="py-5 px-3 text-gray-700 hover:text-gray-900">服务</a>
                <a href="#" class="py-5 px-3 text-gray-700 hover:text-gray-900">关于我们</a>
                <a href="#" class="py-5 px-3 text-gray-700 hover:text-gray-900">联系我们</a>
            </div>

            <!-- 右侧按钮/用户区域 -->
            <div class="hidden md:flex items-center space-x-1">
                <a href="#" class="py-2 px-3 bg-yellow-400 hover:bg-yellow-300 text-yellow-900 rounded transition duration-200">登录</a>
                <a href="#" class="py-2 px-3 bg-blue-500 hover:bg-blue-600 text-white rounded transition duration-200">注册</a>
            </div>

            <!-- 移动端菜单按钮 -->
            <div class="md:hidden flex items-center">
                <button class="mobile-menu-button">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                    </svg>
                </button>
            </div>
        </div>
    </div>

    <!-- 移动端菜单 -->
    <div class="mobile-menu hidden md:hidden">
        <a href="#" class="block py-2 px-4 text-sm hover:bg-gray-200">首页</a>
        <a href="#" class="block py-2 px-4 text-sm hover:bg-gray-200">产品</a>
        <a href="#" class="block py-2 px-4 text-sm hover:bg-gray-200">服务</a>
        <a href="#" class="block py-2 px-4 text-sm hover:bg-gray-200">关于我们</a>
        <a href="#" class="block py-2 px-4 text-sm hover:bg-gray-200">联系我们</a>
    </div>
</nav>

<script>
    // 移动端菜单切换
    const btn = document.querySelector('.mobile-menu-button');
    const menu = document.querySelector('.mobile-menu');

    btn.addEventListener('click', () => {
        menu.classList.toggle('hidden');
    });
</script>
</body>
</html>